<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>车辆价签</title>
    <meta http-equiv="X-UA-Compatible" content="ie=edge,ie=11,chrome=1" />
    <link rel="stylesheet" type="text/css" href="../css/price.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/config.js"></script>
    <script type="text/javascript" src="../js/filter.js"></script>
    <script type="text/javascript" src="../js/qrcode.js"></script>
  </head>
  <body >
    <!-- <div id="priceTag"> -->
    <div id="appPrice">
      <div class="price-logo">
        <img src="../images/wf-logo.png" v-if="res.marketId == 144">
        <img src="../images/ss-logo.png" v-else-if="res.marketId == 143">
        <img src="../images/gc-logo.png" v-else-if="res.marketId == 139">
        <img src="../images/qy-logo.png" v-else>
      </div>
      <div class="price-title"><span>{{res.model.modelYear+'款 '+res.brand.brandName+' '+res.series.seriesName}}</span></div>
      <div class="price-detial">
        <p>
          <span>排量：<a v-if="res.carDisplacement">{{res.carDisplacement + res.carInletModel}}</a><a v-else="res.carDisplacement">暂无</a><a v-if="res.carGearbox">({{res.carGearbox}})</a></span>
          <span style="text-indent: 0">燃油类型：{{res.carFuel || '暂无'}}</span>
        </p>
        <p>
          <span>首次上牌时间：<a v-if="res.carLicenceDate">{{res.carLicenceDate | filterGetDate}}</a><a v-else="res.carLicenceDate">暂无</a></span>
          <span style="text-indent: 0">交强险到期日：<a v-if="res.carForceInsuranceDate">{{res.carForceInsuranceDate | filterGetDate}}</a><a v-else="res.carForceInsuranceDate">暂无</a></span>
        </p>
        <p>
          <span>表显里程：<a v-if="res.carMileage">{{res.carMileage}}万公里</a><a v-else="res.carMileage">暂无</a></span>
          <span style="text-indent: 0">车检到期日：<a v-if="res.carValidateDate">{{res.carValidateDate | filterGetDate}}</a><a v-else="res.carValidateDate">暂无</a></span>
        </p>
        <p>
          <span>车架号：{{res.carVin || '暂无'}}</span> 
          <span style="min-width: 0px;">使用性质：非运营</span>
          
        </p>
      </div>
      <div class="price-newPrice">
        <!-- <div v-if="res.carTaxPrice">新车价<span class="fs75">{{res.carTaxPrice}}万</span><span class="fs30">（含购置税）</span>为您节省<span class="fs75">{{(res.carTaxPrice-res.carRetailPrice).toFixed(2)}}万</span></div> -->
      </div>
      <div class="price-price clearfix">
        <span class="v-font">预售价</span>
        <span class="price-num" v-if="res.carRetailPrice && res.carRetailPrice >= 0">{{res.carRetailPrice}}<span>万元</span></span>
        <span class="price-num" v-else="res.carRetailPrice && res.carRetailPrice >= 0">面议</span>
      </div>
      <p class="user-mobile"><img src="../images/price-tel.png" />联系电话：{{res.user.userMobile || 暂无}}</p>
      <div class="price-conf">
        <div class="conf-left">
          <p v-if="carConfListBoolean" class="conf-list"><span class="conf-title">配置：</span>
            <span class="conf-span" v-for="carConf in carConfList">
              {{carConf}}
            </span>
          </p>
          <p v-if="res.car4sUpkeepState == 1 || res.carTransferState == 1"><span class="conf-title">亮点：</span>
            <span v-if="res.car4sUpkeepState == 1">全程4S店维修保养</span>
            <span v-if="res.carTransferState == 1">包过户</span>
           </p>
        </div>
        <div class="conf-right">
          <!-- <img src="../images/code.png"> -->
          <div id="qrcode">
            <div class="qylogo">
              <img src="https://erp.anpxd.com/cars/images/logo.jpg">
            </div>
          </div>
        </div>
      </div>
      <div class="price-bottom"><img src="../images/qwx.png"></div>
      <div class="print-btn" id="printBtn" onclick="printPriceTag()">打印价签</div>
    </div>
  </body>
  <script type="text/javascript">
    var pricetag = new Vue({
      el:'#appPrice',
      data: {
        res:{
          model:{},
          brand:{},
          series:{},
        },
        carConfList:[],
        carConfListBoolean:false,
      },
    });

    $.ajax({
      type: "get",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl+"/controller/getCarById",  // yii 控制器/方法
      cache: false,
      data: {'carId': carId},  //传送的数据
      error:function(){
        alert("数据传输错误");
      },success: function (data) {
        console.log(data);
        if (data.code != 1) {
          return false
        }
        pricetag.res = data.result;
       
      }
    });

    $.ajax({
      type: "get",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl+"/controller/getCarConfById",  // yii 控制器/方法
      cache: false,
      data: {'carId': carId},  //传送的数据
      error:function(){
         alert("数据传输错误");
      },success: function (data) {
        console.log(data);
         if (data.code != 1) {
          return false
         }
         for (var i = 0; i < data.result.length; i++) {
            for (var j = 0; j < data.result[i].childCarConf.length; j++) {
              if (data.result[i].childCarConf[j].selectedState) {
                pricetag.carConfList.push(data.result[i].childCarConf[j].confName);
              }
              if (pricetag.carConfList.length>0) {
                pricetag.carConfListBoolean = true;
              }else{
                pricetag.carConfListBoolean = false;
              }
            }
         }
      }
    });
    window.onload =function(){
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 260,//设置宽高
            height : 260
        });
        qrcode.makeCode(window.location.origin+'/wx-web/controller/wx/toWxOpenOauth2?action=carDetail&state='+carId);
    }
    function printPriceTag(){
      document.getElementById('printBtn').style.display = "none";
      window.print();
      document.getElementById('printBtn').style.display = "block";
    }


  </script>
</html>


































